<script setup lang='ts'>
  import { onMounted, reactive, ref, watch } from 'vue';
  import request from '@/api/index';
  import passageCont from './passageCont.vue';
  import { useRoute } from 'vue-router';
  const routeName = useRoute().name
  const barrageBox = ref()
  watch(useRoute(),(val)=>{
    if(val.name != routeName) {
      action.playState = false
    }else {
      action.playState = true
      initialBarrage()
    }
  })
  const props = defineProps({
    limit:{
      type:Number,
      default:5
    }
  })
  const passageContRef = ref([])
  const action = reactive({
    clientWidth:window.document.body.clientWidth,
    barrageBoxWidth:0,
    passage:[] as Array<any>,
    barrageList:[] as Array<any>,
    playState:true,
  })
  const messageQuery = reactive({
    page:1,
    limit:20,
  })
  let barrageKey = 0
  const addChange = (obj:any = {})=>{
    // console.log('执行 addChange');
    // const { passageKey, contKey } = obj
    // console.log('我后面可以追加弹幕了', passageKey, contKey);
    addBarrage(obj)
  }
  const endChange = (obj:any = {})=>{
    const { passageKey, contKey } = obj
    action.passage[passageKey][contKey] = {id:''}
    // console.log('我已移动到屏幕外', passageKey, contKey);
    // console.log('action.passage', action.passage);
  }
  const addBarrage = async(obj:any = {})=>{
    // console.log('执行 addBarrage');
    if(action.barrageList.length == 0 || action.passage.length == 0) return
    const { passageKey=0, contKey=0 } = obj
    // console.log('执行', passageKey, contKey);
    // 结束 获取新弹幕 或者 从0开始
    if(barrageKey > action.barrageList.length - 1) {
      messageQuery.page += 1
      if(listLength == 0) {
        barrageKey = 0
      }else {
        barrageKey = 0
        getMessageList(barrageKey)
      }
    }
    if(action.passage[passageKey].length >= 5) {
      const index = action.passage[passageKey].findIndex((font:any) => font.id == '')
      action.passage[passageKey][index] = action.barrageList[barrageKey] // 替换弹幕
    } else {
      action.passage[passageKey].push(action.barrageList[barrageKey]) // 追加弹幕
    }
    barrageKey += 1
  }
  let addIndex = 0
  /**
   * 初始化弹幕队列
   */
  const initialBarrage = ()=>{
    if(action.barrageList.length == 0) return
    const list = action.passage
    const length = props.limit > action.barrageList.length ? action.barrageList.length : props.limit
    if(list.length < length) {
      for(let i=0; i<length; i++) {
        list.push([] as Array<string>)
      }
      action.passage = list
      addBarrage({
        passageKey:addIndex,
      })
      addIndex += 1
      const interval = setInterval(() => {
        if(!action.playState) {
          clearInterval(interval)
          return
        }
        if(addIndex+1 > length) {
          clearInterval(interval)
          return
        }
        addBarrage({
          passageKey:addIndex,
        })
        addIndex += 1
      }, 1000);
    }
  }
  const handleClick = ()=>{
    action.playState = !action.playState
    if(action.playState) {
      initialBarrage()
    }
  }
  let listLength = 0
  // 获取弹幕列表
  const getMessageList = async(key=0)=>{
    const res = await request.lybList(messageQuery)
    const { list=[] } = res?.data || {}
    listLength = list.length
    if(key) {
      barrageKey = key
    }
    if(listLength == 0) {
      barrageKey = 0
    }
    action.barrageList = [...action.barrageList, ...list]
  }
  onMounted(async()=>{
    await getMessageList()
    action.barrageBoxWidth = barrageBox.value.offsetWidth
    initialBarrage()
    // setBarrage()
  })
</script>

<template>
  <div ref="barrageBox" class="barrageBox">
    <template v-if="action.passage.length > 0">
      <!-- 通道 -->
      <div class="passage" v-for="(item,index) in action.passage" :key="index">
        <!-- 弹幕自身 -->
        <!-- <div class="passageCont" v-for="(cont,key) in item" :key="key">{{ cont }}</div> -->
        <template v-for="(cont,key) in item" :key="key">
          <passageCont
            ref="passageContRef"
            :cont="cont"
            :contKey="key"
            :passageKey="index"
            :clientWidth="action.clientWidth"
            :barrageBoxWidth="action.barrageBoxWidth"
            :playState="action.playState"
            @endChange="endChange"
            @addChange="addChange"/>
        </template>
      </div>
    </template>
  </div>
</template>

<style lang='scss' scoped>
  .barrageBox {
    overflow: hidden;
    width: 100%;
    height: 259px;
    padding: 22px 10px 23px 10px;
    box-sizing: border-box;
    .passage {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 30px;
      margin-bottom: 16px;
    }
  }
</style>